<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="/images/favicon.ico"  type="image/x-icon">
    <title>试卷列表</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/minimal/minimal.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/minimal/minimal.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/square/square.css}" rel="stylesheet">
    <link href="/js/iCheck/skins/square/red.css" rel="stylesheet">
    <link href="/js/iCheck/skins/square/blue.css" rel="stylesheet">
    <!--dashboard calendar-->
    <link href="/css/clndr.css" rel="stylesheet">
    <!--common-->
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">
</head>

<body class="sticky-header">

<!--左侧开始-->
<div th:replace="~{admin/commons/common :: commonleft}"></div>
<!--左侧结束-->

<!--主页面开始-->
<div class="main-content" >
    <!--头部开始-->
    <div th:replace="~{admin/commons/common :: commonheader}"></div>
    <!--头部结束-->


    <!--当前位置介绍开始-->
    <div class="page-heading">
        <h3>
            试卷列表
        </h3>
        <ul class="breadcrumb">
            <li>
                <a href="#">卷库管理</a>
            </li>
            <li class="active"> 试卷列表 </li>
        </ul>
    </div>
    <!-- 当前位置介绍结束-->


<!--    body wrapper start-->
    <div class="wrapper">
        <div class="row">
            <div class="col-sm-12">
                <section class="panel">
                    <header class="panel-heading">
                        <div class="form-inline">

                        </div>
                        <!--搜索开始-->
                        <div style="margin-top: 25px; " class="col-md-3">
                            <div class="input-group m-bot15">
                                              <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-sm"><i class="fa fa-search"></i></button>
                                              </span>
                                <form >
                                    <input type="text" class="form-control input-sm" name="searchName" placeholder="输入关键字搜索">
                                </form>
                            </div>

                        </div>

                        <div style="margin-top: 25px; " class="col-md-3">
                            <div class="input-group m-bot15">
                                              <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-sm"><i class="fa fa-search"></i></button>
                                              </span>
                                <form >
                                    <input type="number" class="form-control input-sm" name="searchId" placeholder="输入ID搜索">
                                </form>
                            </div>
                        </div>

                        <div class="col-md-6" style="margin-top: 26px; ">
                            <button class="btn btn-sm btn-danger" onclick="DelSelect()"><i class="fa fa-archive"></i>批量删除</button>
                        </div>
                        <!--搜索结束-->
                    </header>

                    <div class="panel-body">
                        <div class="table-responsive" style="height: 55em">
                            <div class="space15"></div>
                            <table class="display table table-hover" id="dynamic-table">
                                <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" name="id[]" id="check"  onclick="checkAll(this,'id[]');"/> <a type="button" onclick="$('#check').click()" href="javascript:void(0);">全选</a>
                                    </th>
                                    <th>id</th>
                                    <th>考试名</th>
                                    <th>单选数</th>
                                    <th>多选数</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>状态</th>
                                    <th>考试状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="paper : ${paperList}">
                                    <td class="center"> <input type="checkbox" name="id[]"  th:value="${paper.getPId()}" id="id[]" /></td>
                                    <td th:text="${paper.getPId()}"></td>
                                    <td th:text="${paper.getPName()}"></td>
                                    <td th:text="${paper.getSingleSelect()}"></td>
                                    <td th:text="${paper.getMoreSelect()}"></td>
                                    <td th:text="${#temporals.format(paper.getStartTime(), 'yyyy-MM-dd HH:mm:ss')}"></td>
                                    <td th:text="${#temporals.format(paper.getEndTime(), 'yyyy-MM-dd HH:mm:ss')}"></td>
                                    <td>
                                        <button th:if="${paper.getPStatus()}==1" type="button" th:value="${paper.getPId()}" class="btn btn-sm btn-success"  name="statusButton"  id="statusButton" ><i class="fa "></i>启用</button>
                                        <button th:if="${paper.getPStatus()}==0" type="button" th:value="${paper.getPId()}" class="btn btn-sm btn-danger"  name="statusButton"  id="statusButton" ><i class="fa "></i>禁用</button>
                                    </td>
                                    <td>
                                        <button th:if="${paper.getPdStatus()}==0" type="button" th:value="${paper.getPId()}" class="btn btn-sm btn-success"  name="pdStatus" id="pdStatus1"><i class="fa "></i>未开始</button>
                                        <button th:if="${paper.getPdStatus()}==1" type="button" th:value="${paper.getPId()}" class="btn btn-sm btn-info" name="pdStatus" id="pdStatus2"><i class="fa "></i>进行中</button>
                                        <button th:if="${paper.getPdStatus()}==2" type="button" th:value="${paper.getPId()}" class="btn btn-sm btn-danger" name="pdStatus" id="pdStatus3"><i class="fa "></i>已结束</button>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-success" type="button"  id="see" name="see" th:value="${paper.getPId()}">查看</button>
                                        <a  th:href="@{/admin/deletePaper/{pId}(pId=${paper.getPId()})}"
                                            onclick="return del()" th:value="${paper.getPId()}" >Delete
                                        </a>
                                    </td>
                                    <td>
                                         <a  href="#selectMark" data-toggle="modal" th:value="${paper.getPId()}" th:onclick="queryScore([[${paper.pId}]])">成绩</a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <!--查看试卷详情开始-->
                            <div class="col-md-12 ">
                                <a href="#myModal1" data-toggle="modal" class="btn btn-warning hidden" id="tip1">
                                    提示按钮
                                </a>
                                <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal1" class="modal fade" style="display: none;">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header" style="background:#65CEA7">
                                                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                                                <h4 class="modal-title">详情</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="col-sm-12 icheck" id="paperObjectList" >
<!--                                                    考试标题开始-->
                                                    <h4 id="paperTitle" style="text-align: center"></h4>
<!--                                                    考试标题结束-->
                                                    <div id="startSingSelect" >

                                                    </div>

                                                    <div id="startMoreSelect">
                                                        <p></p>
                                                    </div>

                                                    <div id="choice">
                                                        <div class="form-check single-row " id="r_A">
                                                            <div class="radio">
                                                                <input tabindex="3" type="radio"   name="r_choice" value="A">
                                                                <div> A </div>
                                                                <div id="radio_A"></div>
                                                            </div>
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--查看试卷详情结束-->


                            <!--分页-->
                            <div th:fragment="page"><!--定义用于被显示列表页包含-->
                                <head>
                                    <style>
                                        .page-item {
                                            padding: 1px 5px;
                                            border: 1px solid #afafaf;
                                            margin-left: 3px
                                        }

                                        .page-item.active {
                                            color: red;
                                            border: 1px solid red;
                                        }
                                    </style>
                                </head>
                                <div style="float: left" th:if="${page.pages>0}">
                                    当前第<span th:text="${page.current}"></span>页,共<span
                                        th:text="${page.pages}"></span>页,总记录数<span th:text="${page.total}"></span>
                                </div>
                                <div style="float: right" th:if="${page.pages>0}">
                                    <a th:href="@{${jumpUrl}+${qName}+${searchNameValue}+${qId}+${searchIdValue}}" th:text="首页" th:if="${page.current>1}" th:class="page-item"></a>
                                    <a th:href="@{${jumpUrl}+${page.current-1}+${qName}+${searchNameValue}+${qId}+${searchIdValue}}" th:text="上一页" th:class="page-item"
                                       th:if="${page.current>1}"></a>
                                    <a th:href="@{${jumpUrl}+${i}+${qName}+${searchNameValue}+${qId}+${searchIdValue}}"
                                       th:each="i :${#numbers.sequence(1, page.pages)}" th:text="${i}"
                                       th:class="${page.current == i}? 'page-item active' :'page-item' "></a>
                                    <a th:href="@{${jumpUrl}+${page.current+1}+${qName}+${searchNameValue}+${qId}+${searchIdValue}}" th:text="下一页" th:class="page-item"
                                       th:if="${page.current<page.pages}"></a> <a
                                        th:href="@{${jumpUrl}+${page.pages}+${qName}+${searchNameValue}+${qId}+${searchIdValue}}" th:text="尾页" th:class="page-item"
                                        th:if="${page.current<page.pages}"></a>
                                </div>
                            </div>
                            <!--分页结束-->

                            <div class="col-md-12" style="float:right">
                                <a style="color: royalblue">Tips：注意在每次考试前、后，管理员要点击修改考试状态！</a>
                            </div>

                            <!--   成绩modal框开始-->
                            <div aria-hidden="true" data-backdrop="static" data-keyboard="false"  aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="selectMark" class="modal fade">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">成绩排名</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <div aria-hidden="true">&times;</div>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <table class="display table table-hover" >
                                                <input class="hidden" id="score" value="">
                                                <thead>
                                                    <tr>
                                                        <th>排名</th>
                                                        <th>用户名</th>
                                                        <th>真实姓名</th>
                                                        <th>学号</th>
                                                        <th>院系</th>
                                                        <th>分数</th>
                                                        <th>交卷时间</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="scoreList">

                                                </tbody>
                                            </table>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                                    <button type="button" class="btn btn-primary" onclick="downLoadExcel()">导出</button>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
<!--                              成绩modal框结束-->

                        </div>
                    </div>
                </section>

            </div>
        </div>
    </div>
<!--    body wrapper end-->

    <!--footer section start-->
    <footer>
        2022 &copy;<a href="https://www.pdsu.edu.cn/" target="_blank">平顶山学院软件应用双创实验室提供技术支持</a>
    </footer>
    <!--footer section end-->


</div>
<!--主页面结束-->

<div th:replace="~{admin/commons/common :: commonupdatePwd}"></div>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.nicescroll.js"></script>


<!--表单校验-->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/validation-init.js"></script>

<!--common scripts for all pages-->
<script src="/js/scripts.js"></script>
<!--script for editable table-->
<script src="/js/editable-table.js"></script>


<script type="text/javascript">


    function checkAll(obj,cName){
        var checkboxs = document.getElementsByName(cName);
        for(var i = 0; i< checkboxs.length; i+=1){
            checkboxs[i].checked = obj.checked;
        }
    }


    // 单个删除
    function del() {
        if (confirm("您确定要删除吗？")) {
            return true;
        } else {
            return false;
        }
    }

    function DelSelect() {
        var Checkbox = false;
        $("input[name='id[]']").each(function() {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {
            var t = confirm("您确认要删除选中的内容吗？");
            if (t == false) {
                return false;
            } else {
                var ids="";
                $("input[name='id[]']").each(function() {
                    if (this.checked == true && this.value!="on") {
                        ids += this.value + ",";
                    }
                });
                window.location.replace("/admin/deletePapers?ids="+ids);
            }
        } else {
            alert("请选择您要删除的内容!");
            return false;
        }
    }

    function getGsonLength(json){
        var jsonLength=0;
        for (var i in json) {
            jsonLength++;
        }
        return jsonLength;
    }


    // 改变考试状态
    for (var j = 0; j < document.getElementsByName("pdStatus").length; j++){
        document.getElementsByName("pdStatus")[j].onclick = (function () {
            if (confirm("是否改变考试状态？请确保没有用户答题！")){
                var id = this.value
                var statusValue = 3
                if (this.innerText == '未开始'){
                    statusValue = 0
                }else if (this.innerText == '进行中'){
                    statusValue = 1
                }else if (this.innerText == '已结束'){
                    statusValue = 2
                }
                $.ajax({
                    //请求路径
                    url: "/admin/paperPdStatusChange",
                    //请求类型
                    type: "POST",
                    //data表示发送的数据
                    data: JSON.stringify({
                        pdStatus: statusValue,
                        id: id
                    }), //定义发送请求的数据格式为JSON字符串
                    contentType: "application/json;charset=utf-8",
                    //定义回调响应的数据格式为JSON字符串，该属性可以省略
                    dataType: "json",
                    //成功响应的结果
                    success: function (data) {
                        if (data.code == 200){
                            alert("修改试卷状态成功！")
                            location.reload();
                        }else{
                            alert("数据库出了一点问题，请稍后重试！")
                            location.reload();
                        }
                    },

                })
            }else{
                return
            }
        });
    }




    //获取按钮数组
    var len = document.getElementsByName("statusButton").length;
    //通过循环给每个按钮添加点击事件
    var temp = document.getElementsByName("statusButton")
    // alert(len)

    for(var i = 0; i <document.getElementsByName("statusButton").length ; i++){
        document.getElementsByName("statusButton")[i].onclick = (function() {
            var id = this.value
            var statusValue = this.innerText=='启用'?1:0
            var _this = $(this)
            $.ajax({
                //请求路径
                url: "/admin/paperStatusChange",
                //请求类型
                type: "POST",
                //data表示发送的数据
                data: JSON.stringify({
                    pStatus: statusValue,
                    id: id
                }), //定义发送请求的数据格式为JSON字符串
                contentType: "application/json;charset=utf-8",
                //定义回调响应的数据格式为JSON字符串，该属性可以省略
                dataType: "json",
                //成功响应的结果
                success: function (data) {
                    if(data.status==1){
                        _this.removeClass('btn-danger').addClass('btn-success').html('启用')
                    }else if(data.status==0) {
                        _this.removeClass('btn-success').addClass('btn-danger').html('禁用')
                    }
                    else {
                        alert('修改失败')
                    }
                },

            })
        });
    }




    //查看试卷
    for(var i = 0 ; i < document.getElementsByName("see").length; i++) {
        document.getElementsByName("see")[i].onclick = (function () {
            var id = this.value
            var _this = $(this)
            $.ajax({
                //请求路径
                url: "/admin/lookPaperDetails",
                //请求类型
                type: "POST",
                //data表示发送的数据
                data: JSON.stringify({
                    pId: id
                }), //定义发送请求的数据格式为JSON字符串
                contentType: "application/json;charset=utf-8",
                //定义回调响应的数据格式为JSON字符串，该属性可以省略
                dataType: "json",
                //成功响应的结果
                success: function (data) {
                    document.getElementById('r_A').className = 'form-check single-row '
                    $('#paperTitle').text(data.paperName)
                    //获取题目数
                    var length = getGsonLength(data.questionObjectList)
                    // 删除所有克隆的节点
                    var f = document.getElementById("startSingSelect");
                    var childs = f.childNodes;
                    for(var i = childs.length - 1; i >= 0; i--) {
                        f.removeChild(childs[i]);
                    }
                    for(var i = 0; i < length; i++){
                        var choiceTitle = data.questionObjectList[i].titleContent
                        //创建一个节点p用来放选项标题
                        var p = $("<p id='choiceTitle"+i+"'" +"</p>")
                        $('#startSingSelect').append(p)
                        p.text(i+1+"."+choiceTitle)
                        $('#startSingSelect').append()
                        //获取选项的数量
                        var choiceNum = getGsonLength(data.questionObjectList[i].questionItemObjects)
                        for(var j = 0; j < choiceNum; j++){
                            var prefix = data.questionObjectList[i].questionItemObjects[j].prefix
                            var choiceContent = data.questionObjectList[i].questionItemObjects[j].content
                            //获取要克隆的节点
                            var cloneDiv = document.getElementById('r_A')
                            var clone = document.getElementById('r_A').cloneNode(true)
                            clone.id='r_A_clone'
                            //设置属性
                            clone.children[0].children[1].innerHTML = prefix
                            clone.children[0].children[2].innerHTML = choiceContent
                            var par = document.getElementById('startSingSelect')
                            par.appendChild(clone)
                        }
                    }
                    document.getElementById('r_A').className = 'form-check single-row hidden'
                    $('#tip1').click()
                },
            })
        });
    }

    function values(id,userName,password,uId,realName,sex,profession,perms){
        $('#id').val(id)
        $('#userNameUpdate').val(userName)
        $('#passwordUpdate').val(password)
        $('#uIdUpdate').val(uId)
        $('#realNameUpdate').val(realName)
        $("input[name='sexUpdate'][value='" + sex + "']").prop("checked", true);
        $('#professionUpdate').val(profession)
        $("input[name='permsUpdate'][value='" + perms + "']").prop("checked", true);
    }


    // 根据Id查分数
    function queryScore(pid){

        // 删除所有克隆的节点
        var f = document.getElementById("scoreList")
        f.innerHTML = ""
        $('#selectMark').modal("hide");

        $.ajax({
            url: "/admin/queryMark",
            type: "POST",
            data: JSON.stringify({
                id : pid
            }),
            contentType: "application/json;charset=utf-8",
            //定义回调响应的数据格式为JSON字符串，该属性可以省略
            dataType: "json",
            success: function (data) {
                if (data.code == 200){

                    $('#selectMark').modal("show");

                    // $('#score').attr("value",data.scoreList)
                    // 删除所有克隆的节点
                    var f = document.getElementById("scoreList")
                   f.innerHTML = ""

                    $("#score").attr("value",data.pid)
                    var list = document.getElementById('scoreList')
                    var arry = data.scoreList
                    var str = '';
                    for(var i = 0; i < arry.length; i++){
                        str += '<tr>'
                        str += '<td>'+arry[i].id+'</td>'
                        str += '<td>'+arry[i].userName+'</td>'
                        str += '<td>'+arry[i].realName+'</td>'
                        str += '<td>'+arry[i].uid+'</td>'
                        str += '<td>'+arry[i].profession+'</td>'
                        str += '<td>'+arry[i].mark+'</td>'
                        str += '<td>'+arry[i].examTime+'</td>'
                        str += '</tr>'
                    }
                    list.innerHTML = str

                }else{
                    $('#selectMark').modal("hide");
                    alert("暂时没有学生完成考试！")
                }

            }
        })
    }
    // 导出Excel
    function downLoadExcel(){
        // var list = $("#score").val()
        // var scoreList = [];
        // if (list.length > 0) {
        //     for (var i = 0; i < list.length; i++) {
        //         var scoreVM = new Object();
        //         scoreVM.field1 = list[i].sid;
        //         scoreVM.field2 = list[i].userName;
        //         scoreVM.field3 = list[i].realName;
        //         scoreVM.field4 = list[i].uid;
        //         scoreVM.field5 = list[i].examTime;
        //         scoreList[i] = scoreVM
        //     }
        var pid = $("#score").val()
            $.ajax({
                url: "/admin/dowmLoadExcel",
                type: "POST",
                data: JSON.stringify({
                    id : pid
                }),
                contentType: "application/json;charset=utf-8",
                //定义回调响应的数据格式为JSON字符串，该属性可以省略
                dataType: "json",
                success: function (data) {
                    if (data.code == 200) {
                        alert("导出成功！")
                    } else {
                        alert("导出失败，请稍候重试")
                    }
                }
            })
        // }
        // else{
        //     alert("没有数据!")
        // }
    }





    // 修改密码
    $("#pwd_btn").click(function() {
        $("#pwd_btn").blur();
        if (confirm("是否确定修改?")){
            var submit = true;
            var oldPwd = $("#oldPwd").val(); //原始密码
            var newPwd = $("#newPwd").val(); //新密码1
            var newPwd2 = $("#newPwd2").val(); //新密码2

            if ((oldPwd && newPwd && newPwd2) == '') {
                $("#tip").html("密码不能为空");
                $("#tip").show();
                submit = false;
            }
            if(submit){
                $.ajax({
                    type:"post",
                    url:"/admin/updatePwd",
                    data: JSON.stringify({
                        oldPwd : oldPwd,
                        newPwd : newPwd,
                        newPwd2 : newPwd2
                    }),
                    contentType: "application/json;charset=utf-8",
                    //定义回调响应的数据格式为JSON字符串，该属性可以省略
                    dataType: "json",
                    success:function (data){
                        if(data.code == 200 ){
                            $("#tip").hide();
                            $("#pwd_form").submit();
                            alert("修改成功，请重新登录!")
                            window.location.href = "/user/logout"
                        }else if(data.code != 200){
                            $("#tip").html(data.info);
                            $("#tip").show();
                        }
                    }
                });
            }
        }
    });


    jQuery(document).ready(function() {

        EditableTable.init();
    });
    document.getElementById("paper-list").className="active";
    document.getElementById("menu3").className="menu-list nav-active";
</script>

</body>


</html>
<script>
    import Form_advanced_components from "./form_advanced_components.html";
    export default {
        components: {Form_advanced_components}
    }
</script>